<template>
    <div class="login-wrap">
        <!-- <div class='loginHead'><v-head></v-head></div> -->
        <div class="ms-title">BTM管理端入口</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username" >
                    <el-input v-model="ruleForm.username" class="username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" >
                    <el-input type="password" class="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                <p style="font-size:12px;line-height:30px;color:#999;">客服热线：021-88888888</p>
            </el-form>
        </div>
        <loading v-if="loading" :tip='tip'></loading>
    </div>
</template>
<script>
import * as rpConfig from "../../../rpConfig/constant";
import { HttpReq } from "../../service/server";
import * as Login from '../../service/login';
 import vHead from '../common/Header.vue';
import { api } from '../../api/index';
import loading from '@/components/common/loading.vue';
// import * as login from '../../service/login';
let service = new HttpReq();
export default {
     components:{
            vHead,
            loading
        },
  data: function() {
    return {
      tip:'',
      loading:false,
      ruleForm: {
        username: "",
        password: "",
        baseUrl:process.env.BASE_URL,
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  mounted(){

  $('.login-wrap').particleground({
    dotColor: '#e7e7e7',
    lineColor: '#e7e7e7'
  });


  },
  methods: {
    warningAlert(msg) {
        this.$message({
            message: msg,
            type: 'warning',
        });
    },
    getTime(){
      var date = new Date(); //日期对象
      var now = "";
      now = date.getFullYear()+"-"; //读英文就行了
      now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
      now = now + date.getDate()+" ";
      now = now + date.getHours()+":";
      now = now + date.getMinutes()+":";
      now = now + date.getSeconds()+"";
      return now;
    },
    submitForm(formName) {
      
      // //console.log(process.env)
      // this.$router.push("/home")
      // return false;
      const self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          this.loading=true;
          this.tip='登录中...';
          var params={
            loginName:this.ruleForm.username,
            password:this.ruleForm.password,
          }
          api.admin.login(params).then((res)=>{
            // //console.log(res);
            res.createTime=this.getTime();
            if(res.code=='404'){
              this.loading=false;
              this.tip='错误';
              return this.$message({
                message:'登录信息有错误，请检查后再试',
                type:'warning'
              });

            }
            if(res.code=='500'){
              this.loading=false;
              this.tip='错误';
              return this.$message({
                message:res.message,
                type:'warning'
              });

            }
            Login.setLogin(res);
            this.$message({
              message: '登录成功',
              type: 'success'
            });
             setTimeout(()=>{
                self.$router.push(Login.getLoginPath())
              },1500);
          }).catch(err=>{
            this.loading=false;
            this.warningAlert('获取数据失败')
          })
        } else {
          this.warningAlert('用户名或密码未填写!')
          return false;
        }
      });
    }
  },
  mounted () {
    Login.clearLogin();
    //console.log(Login.getLogin())
  }
};
</script>

<style scoped>
.loginHead{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  z-index: 100;
}
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
div.el-form-item{
    margin-bottom: 30px;
}
.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  color: #d97a5d;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 160px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
}
</style>